<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>系统消息</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <style type="text/css">
      .news {}

      .newsList {
        padding: 10px 0px;
        border-bottom: 1px solid #EEEEEE;
      }

      .newsList .tag {
        padding: 0px 8px;
        display: inline-block;
        font-size: 12px;
        color: #fff;
        border-radius: 20px;
      }

      .new img {
        width: 35px;
      }
    </style>
  </head>
  <body class="bg-white">
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">系统消息</h1>
      </header>
      <div id="refreshContainer" class="mui-scroll-wrapper bg-white mui-content">
        <div class="mui-scroll">
          <ul class="news padding-lr mui-table-view">
            <li class="newsList" v-for="item in list" @tap="detail(item)">
              <div class="padding-bottom-sm">
                <span class="tag bg-blue">{{item.typeName}}</span>
                <span class="tag bg-orange" v-if="item.state!=1">未读</span>
                <!-- <div class="fr new"><img src="../img/news@2x.png"></div> -->
              </div>
              <div class="text-df">{{item.subject}}</div>
              <div class="text-sm padding-bottom-sm text-grey">{{item.content}}</div>
              <div class="text-sm text-grey">{{time(item.createTime)}}</div>
            </li>
            <!-- <li class="newsList">
              <div class="padding-bottom-sm">
                <span class="tag bg-blue">系统通知</span>
                <span class="tag bg-orange">未读</span>
                <div class="fr new"><img src="../img/news@2x.png"></div>
              </div>
              <div class="text-df padding-bottom-sm">2007-f002-2256设备档案因模型修改，删除了品牌属性</div>
              <div class="text-sm text-grey">2019-01-23</div>
            </li> -->
          </ul>
        </div>
      </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/mui.dtpicker.js"></script>
    <script src="../js/sqlite.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <!-- /api/msgInbox -->
    <script type="text/javascript">
    	mui.init()
      var message = null;
      var size = 15;
      var page = 0;
      mui.init({
        pullRefresh: {
          container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: { //下拉刷新
            style: 'circle',
            height: 50, //可选,默认50.触发下拉刷新拖动距离,
            auto: false, //可选,默认false.首次加载自动下拉刷新一次
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              page = 0;
              load(page);
              ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
              // countDown++;
            }
          },
          up: { //上拉加载
            height: 50, //可选.默认50.触发上拉加载拖动距离
            auto: false, //可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              /*每次加载动态的添加一个li*/
              // $("#testUl").append($("<li>" + new Date() + "</li>"));
              this.endPullupToRefresh(false)
              page++;
              load(page);
            }
          }
        }
      });
      mui.plusReady(function() {
        load(page);
      })
      message = new Vue({
      	el: '#container',
        data: {
        	height1: 0, // 列表高度
          list:[]
        },
        created:function() {
          this.initHeight()
        },
        methods: {
          // 设置高度
          initHeight: function() {
          	var height = window.innerHeight - 95;
          	this.height1 = height;
          },
          time(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var mon = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
          },
          detail(item){
            mui.baseApp.httpRequst("/api/msgInbox/" + item.id + "/" + 1, {}, function(data) {
              item.state = 1
              var opener= plus.webview.currentWebview().opener();
              // var id=opener.id
              // page = plus.webview.getWebviewById(id);
              mui.fire(opener,'count');
            }, function() {
              console.log("获取数据失败");
            })
            // mui.openWindow({
            //   url: '../waitList/detail.html',
            //   id: '../waitList/detail.html',
            //   extras: {
            //     pageId: item.id
            //   }
            // })
          }
        }
      })
      window.addEventListener("update", function(e) {
        console.log('更新数据');
        page=0;
        load(page);
        var opener= plus.webview.currentWebview().opener();
        var id=opener.id
        page = plus.webview.getWebviewById(id);
        mui.fire(page,'update');
      });
      function load(page) {
        if(page===0){
          plus.nativeUI.showWaiting('加载中...');
        }
        mui.baseApp.httpRequst("/api/msgInbox", {
          page: page,
          size: size
        }, function(data) {
          plus.nativeUI.closeWaiting();
          if (page == 0) {
            message.list = []
          }
          message.list = message.list.concat(data.records)
          // console.log('设备档案数据' + JSON.stringify(data))
          //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
          if (data.records.length < size) { //
            mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
            mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
            mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
            mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉加载
          }
        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
    </script>
  </body>
</html>
